<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>数据统计</title>
    <!-- 适应手机页面 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script>
        records = [];

        function parse_record(record_str) {
            items = record_str.split(',');
            if (items.length == 5) {
                return {
                    id: items[0],
                    hr: items[1],
                    spo: items[2],
                    username: items[3],
                    time: items[4]
                };
            } else {
                return null;
            }
        }

        function load_latest() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        let record = parse_record(xhr.responseText);
                        if (record != null) {
                            records.push(record);
                            document.getElementById("latest_record").innerHTML = 
                                "用户名：" + record.username + "<br>" +
                                "当前心率：" + record.hr + "<br>" +
                                "当前血氧饱和度：" + record.spo + "<br>" +
                                "更新时间：" + record.time;
                        }
                    } else {
                        document.getElementById("latest_record").innerHTML = "出错";
                    }
                }
            }
            xhr.open("GET", "actions/latest_record");
            xhr.send();
        }

        function load_table() {
            var table_str = "<tr> <td>时间</td> <td>心率</td> <td>血氧饱和度</td> </tr> \n";
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        let data = xhr.responseText.split("\n");
                        data.forEach(i => {
                            let record = parse_record(i);
                            if (record != null) {
                                table_str +=
                                    "<tr> " +
                                    "<td>" + record.time + "</td> <td>" +
                                    record.hr + "</td> <td>" +
                                    record.spo + "</td>" +
                                    "</tr> \n";
                            }
                        });
                        document.getElementById("all_records").innerHTML = table_str;
                    } else {
                        document.getElementById("all_records").innerHTML = "出错";
                    }
                }
            }
            xhr.open("GET", "actions/list_records.csv");
            xhr.send();
            document.getElementById("all_records").innerHTML = "加载中";
        }

        function load_all() {
            load_latest();
            load_table();
            setInterval("load_latest();", 3000);
        }

        function logoff() {
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    window.location = "index.html";
                    location.reload();
                }
            }
            xhr.open("GET", "actions/logoff");
            xhr.send();
        }

        function download_data() {
            window.location = "actions/list_records.csv";
        }
    </script>
</head>

<body onload="load_all()">
    <h1>数据统计</h1>
    <hr>
    <div id="latest_record" style="font-size: large;">
        加载中
    </div>
    <div>
        <button type="button" onclick="download_data();">导出数据</button>
        <button type="button" onclick="logoff();">退出</button>
    </div>
    <div>
        <h2>历史数据</h2>
        <table id="all_records" cellspacing="10%">
    </div>
</body>

</html>